<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>提现</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #amount {
      flex: 1;
      border: none; /* 去掉边框 */
      outline: none; /* 去掉点击时的默认轮廓 */
      padding: 5px;
      color: #333;
      margin-left: 8px; /* 保持之前设置的左侧距离 */
      /* 可选：添加底部边框作为视觉引导 */
      /* border-bottom: 1px solid #eee; */
    }

    body {
      background-color: #f4f4f4;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    .withdraw-header {
      /* 使用Flexbox布局 */
      display: flex;
      align-items: center;
      justify-content: center; /* 水平居中 */
      height: 44px; /* 固定高度，常见于移动端标题栏 */
      position: relative; /* 为返回按钮定位做准备 */
      border-bottom: 1px solid #eee;
      background-color: #fff;
    }

    .back-btn {
      text-decoration: none;
      color: #000;
      font-size: 20px;
      position: absolute; /* 绝对定位，不影响标题居中 */
      left: 15px; /* 距离左侧的距离 */
    }

    .title-text {
      font-size: 17px;
      font-weight: bold;
      color: #000;
    }

    .withdraw-header a {
      text-decoration: none;
      color: #000;
      margin-right: 10px;
    }

    .withdraw-content {
      background-color: #fff;
      margin-top: 0px;
    }

    .select-title {
      padding: 6px 15px; /* 上下间距从10px减小到6px，左右保持15px不变 */
      color: #999;
      border-bottom: 1px solid #eee;
      font-size: 14px; /* 字体从默认大小减小到12px */
    }

    .withdraw-type {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }

    .withdraw-type input[type="radio"] {
      display: none;
    }

    .withdraw-type label {
      flex: 1;
      cursor: pointer;
    }

    .withdraw-type .check-mark {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      margin-left: auto;
    }

    .withdraw-type input:checked+.check-mark::after {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #00cc99;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .form-group {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }

    .form-group label {
      width: 80px;
      color: #333;
    }

    .form-group input {
      flex: 1;
      border: none;
      outline: none;
      color: #999;
    }

    /* 手续费等信息 */
    .fee-info {
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
      color: #333;
    }

    .process-info {
      padding: 10px 15px;
      color: #333;
      font-size: 12px;
      /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    }

    .process-info p {
      margin-bottom: 5px;
    }

    .withdraw-btn {
      display: block;
      width: 90%;
      margin: 20px auto;
      padding: 10px;
      text-align: center;
      background-color: #00cc99;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
    }
  </style>
</head>

<body>
<div class="withdraw-header">
  <a href="index.html" class="back-btn">&#60;</a>
  <span class="title-text">提现</span>
</div>
<div class="select-title">请选择到账方式</div>
<div class="withdraw-content">
  <div class="withdraw-type">
    <label for="wechat">提现到微信</label>
    <input type="radio" id="wechat" name="withdrawType" checked>
    <span class="check-mark"></span>
  </div>
  <div class="withdraw-type">
    <label for="alipay">提现到支付宝</label>
    <input type="radio" id="alipay" name="withdrawType">
    <span class="check-mark"></span>
  </div>
  <div class="withdraw-type">
    <label for="bank">提现到银行卡</label>
    <input type="radio" id="bank" name="withdrawType">
    <span class="check-mark"></span>
  </div>
  <div class="withdraw-type">
    <label for="company">提现到对公账户</label>
    <input type="radio" id="company" name="withdrawType">
    <span class="check-mark"></span>
  </div>
  </div>
  <div class="withdraw-content">
  <div class="form-group">
    <label for="phone">手机号：</label>
    <input type="text" id="phone" placeholder="请输入手机号">
  </div>
  <div class="form-group">
    <label for="realName">真实姓名：</label>
    <input type="text" id="realName" placeholder="请输入真实姓名">
  </div>
    <div class="form-group">
      <label for="amount">可提金额：</label>
      <span class="fixed-amount" id="ketixian">0.00元</span>
      <input type="text" id="amount" placeholder="请输入提现金额">
    </div>
    <div class="fee-info">提现手续费：1.00%</div>
    <div class="fee-info">流量卡月费：0元</div>
</div>
<!-- 提现流程和按钮容器 -->
<div class="process-container">
  <div class="process-info">
    <p>微信提现流程</p>
    <p>1、管理员审核</p>
    <p>2、审核通过后请到小程序-我的-代理商提现页面，用户点击“我要收款”主动发起收款，及时收款到账</p>
  </div>

  <div class="withdraw-btn-container">
    <a href="javascript:;" class="withdraw-btn">提现</a>
  </div>
</div>
</body>

<script src="../js/dataManager.js"></script>
<script>
  window.onload = () => {
    // 渲染函数：从共享数据更新 DOM
    const render = (data) => {
      document.getElementById('ketixian').textContent = data.totalIncome.toFixed(2);
    };

    // 1. 初始化渲染（用持久化数据）
    render(window.dataManager.getSharedData());

    // 2. 监听数据变化：定时更新或跨页修改时自动刷新
    window.dataManager.onDataUpdate(render);
  };
</script>

</html>